<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'处理'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "270">
         <div class="analyItem">
            <p class="analyItemTit tx-center">结果</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">过程</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">投诉</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">成本</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">财务</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">人事</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">会议</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">订单</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">管理</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">绩效</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">分红</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">

            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
                <input type="button" value="分司订单" class="uiBtn-blue uiBtn-normal" @click="clickFourShow(0)">
            </div>
        </div>

    <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <rx-divisionorder v-if="fourIndex === 0" :key="0"></rx-divisionorder>
    </transition-group>
    </div>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
import rxDivisionorder from './divisionorder'
export default {
    components: {
        rxDivisionorder
    },
    data () {
        return {
            fourIndex: undefined
        }
    },
    created () {

    },
    methods: {
        ...mapMutations({
            updateLeft: `SET_UPDATE_LEFT`
        }),
        clickFourShow (index) {
            this.fourIndex = index
            if (index === undefined) {
                this.updateLeft()
            }
        }
    }
}
</script>
